{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}
{{! THIS COMPONENT RENDERS INSIDE A MODAL (must pass @container to copy buttons) }}
{{#if this.encodedToken}}
  <p class="has-bottom-margin-l" data-test-dr-token-flow-step="show-token">
    Below is the process and the values necessary to generate your operation token. Read the instructions carefully!
  </p>
  <div class="has-bottom-margin-m">
    <div class="has-bottom-margin-xl">
      <h4 class="has-text-weight-bold is-size-7">
        Encoded operation token
      </h4>
      <p class="help has-text-grey has-bottom-margin-xs">
        This is a one-time token that will be used to generate the operation token. Please save it.
      </p>
      <Hds::Copy::Snippet
        @textToCopy={{this.encodedToken}}
        @container="#shamir-flow-modal"
        @onError={{(fn (set-flash-message "Clipboard copy failed. The Clipboard API requires a secure context." "danger"))}}
        data-test-shamir-encoded-token
      />
    </div>
    {{#if this.otp}}
      <div class="has-bottom-margin-xl">
        <h4 class="has-text-weight-bold is-size-7">
          One time password (OTP)
        </h4>
        <p class="help has-text-grey has-bottom-margin-xs">
          This OTP will be used to decode the generated operation token. Please save it.
        </p>
        <Hds::Copy::Snippet
          @textToCopy={{this.otp}}
          @container="#shamir-flow-modal"
          @onError={{(fn
            (set-flash-message "Clipboard copy failed. The Clipboard API requires a secure context." "danger")
          )}}
        />
      </div>
    {{/if}}
    <div class="has-bottom-margin-xl">
      <h4 class="has-text-weight-bold is-size-7">
        DR operation token command
      </h4>
      <p class="help has-text-grey has-bottom-margin-xs">
        {{#if this.otp}}
          This command contains both the encoded token and the OTP. It should be executed on the secondary cluster in order
          to generate the operation token.
        {{else}}
          This command requires the OTP saved earlier. It should be executed on the secondary cluster in order to generate
          the operation token.
        {{/if}}
      </p>
      {{! template-lint-disable quotes }}
      {{#let
        (if
          this.otp
          (concat 'vault operator generate-root -dr-token -otp="' this.otp '" -decode="' this.encodedToken '"')
          (concat 'vault operator generate-root -dr-token -otp="<enter your otp here>" -decode="' this.encodedToken '"')
        )
        as |cmd|
      }}
        <Hds::CodeBlock
          @language="bash"
          @hasLineNumbers={{false}}
          @hasCopyButton={{true}}
          @hasLineWrapping={{true}}
          @value={{cmd}}
        />
      {{/let}}
      {{! template-lint-enable quotes }}
    </div>
  </div>
  <div>
    <Hds::Button {{on "click" this.onCancelClose}} @text="Clear & Close" />
  </div>
{{else if this.started}}
  <Shamir::Form
    @action={{@action}}
    @progress={{this.progress}}
    @threshold={{this.threshold}}
    @errors={{this.errors}}
    @inputLabel="Root key portion"
    @buttonText="Generate token"
    @onSubmit={{this.onSubmitKey}}
    @otp={{this.otp}}
    @alwaysShowProgress={{true}}
    data-test-dr-token-flow-step="shamir"
  >
    <p>Generate an operation token by entering a portion of the
      <strong>primary's root key</strong>. Once all portions are entered, the generated token may be used to manage your
      secondary Disaster Recovery cluster.
    </p>
  </Shamir::Form>
{{else if this.generateWithPGP}}
  <MessageError @errors={{this.errors}} />
  <ChoosePgpKeyForm
    @onCancel={{fn (mut this.generateWithPGP) false}}
    @onSubmit={{this.usePgpKey}}
    @formText={{this.pgpText.form}}
    @confirmText={{this.pgpText.confirm}}
    @buttonText="Generate operation token"
    data-test-dr-token-flow-step="choose-pgp"
  />
{{else}}
  {{! Generate token flow not started }}
  <form
    {{on "submit" this.startGenerate}}
    id="shamir"
    aria-label="shamir generate form"
    data-test-dr-token-flow-step="begin"
  >
    <MessageError @errors={{this.errors}} />
    <div class="has-bottom-margin-m">
      <p>
        Updating or promoting this cluster requires an operation token, generated by inputting the root key shares. If you'd
        like to first encrypt the token with a PGP Key, click "Encrypt with PGP key" below, otherwise we can begin generation
        of the operation token.
      </p>
    </div>
    <div class="field is-grouped is-flex-center">
      <div class="control is-flex-row">
        <Hds::Button
          @color="tertiary"
          @icon="key"
          {{on "click" (fn (mut this.generateWithPGP) true)}}
          data-test-use-pgp-key-cta
          @text="Provide PGP Key"
        />
      </div>
      <div class="control">
        <span class="has-side-padding-s">
          or
        </span>
      </div>
      <div class="control">
        <Hds::Button type="submit" data-test-generate-token-cta @text="Generate operation token" />
      </div>
    </div>
  </form>
{{/if}}
<hr class="has-background-gray-100" />

<Hds::Button
  @color="secondary"
  {{on "click" this.onCancelClose}}
  data-test-shamir-modal-cancel-button
  @text={{if this.encodedToken "Close" "Cancel"}}
/>